<template >
  <el-row>
    <el-upload
      class="upload-demo"
      action="http://yougou.hzzjkj.net/backend/image/upload"
      :on-preview="handlePreview"
      :before-upload="beforeAvatarUpload"
      multiple
      :limit="limit"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button v-if="!isDetail" size="small" type="primary">点击上传({{fileList.length}}/{{limit}} )</el-button>
      <div v-if="!isDetail" slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      <div slot="file" class="imgContainer" slot-scope="{file}">
         <img
          class="el-upload-list__item-thumbnail"
          :src="file.imageUrl" alt=""
        >
        <span
          v-if="!isDetail"
          class="el-upload-list__item-delete"
          @click="beforeRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </div>
    </el-upload>
  </el-row>
</template>

<script>
import { upload } from '@/api/common' 
  export default {
      props: {
        isDetail: Boolean,
        limit: {
          type: Number,
          default: 1
        },
         fileList: {
            type: Array,
            default: []
         },
      },
      data() {
        return {
         
          dialogImageUrl: '',
          disabled: false
        };
      },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
     
       handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 ${limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file) {
        this.$emit('deleteImage', file);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传图片大小不能超过 2MB!');
        // }
        // if (!(isJPG && isLt2M)) {
        //   return false;
        // }
        let para = new FormData();
        para.append('image', file);
        upload(para).then(data => {
          file.imageUrl = 'http://' + data.data.imageUrl;
          file.imageId = data.data.imageId;
          this.$emit('addImage', file)
          // this.fileList.push(file);
        })
        return false;
      }
    }
  }
</script>

<style lang="less" >
    .el-upload-list{
      .el-upload-list__item{
        width: auto;
        margin-right: 5px;
        &:first-child{
          margin-top: 5px;
        }
      }
      &::after{
        content: '';
        clear: both;
        display: table;
      }
      li{
        float: left;
      }
    }
    .imgContainer{
      width: 100px;
      height: 100px;
      position: relative;
      img{
        width: 100%;
        height: 100%;
      }
      &:hover{
        .el-upload-list__item-delete{
          display: block;
          cursor: pointer;
          top: 50%;
          left: 50%;
          margin-left: -6px;
          margin-top: -6px;
        }
      }
      
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9 !important;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
		    box-sizing: border-box;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px !important;
        text-align: center;
      }
      .avatar {
        width: 120px;
        height: 120px;
        display: block;
      }
</style>
